<template>
    <div class="wrapper">
        <div class="top"> 
            <img src="../assets/小于号.png" @click="a">
            <div class="title">管理收货地址</div>
            <div class="add" @click="add">新建</div>
        </div>
        <p class="title2">我的收货地址</p>
        <div class="card" @click="edit(index)" v-for="(items,index) in address" :key="index" >
            <div class="wrap">
                <div class="info">
                    <span class="name">{{items.name}}</span>
                    <span class="phone">{{items.phone}}</span>
                </div>
                <div class="info2">
                    <div>
                        <span class="city">{{items.city}}</span>
                        <span class="school">{{items.school}}</span>
                        <span class="number">{{items.number}}</span>
                    </div>
                </div>
            </div>
            <img src="../assets/大于.png">
        </div>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapMutations} from 'vuex'
    export default{
        // name: 'AddressView',
        // components: {
        //     addressTop
        // },
        data(){
            return {
                 address1:[{
                    id:'',
                    name:'',
                    phone:'',
                    city:'',
                    school:'',
                    number:'',
                    select:false
                }]
            }
            
        },
        computed:{
            ...mapState(['address1','address','dizhi']),
            ...mapGetters(['selectAddress'])
            
        },
        created(){
          
            
        },
        methods:{
            ...mapMutations(['changeName','address1']),
                add(){
                    this.$router.push({ path:'/AddAddress'  });
                    this.$store.commit("changeName","新建");
                    this.$store.commit("address1",this.address1);

                },
                a(){
                    this.$router.push("/first")
                },
                edit(index){
                    if(this.$store.state.dizhi==='查看地址'){
                        this.$router.push({ path:'/AddAddress'  });
                        this.$store.commit("changeName","编辑");
                        //  this.address1=this.address[id-1];
                        this.address1=this.address[index];
                        this.$store.commit("address1",{address1:this.address1});
                    }else if(this.$store.state.dizhi==="设置收货地址"){
                        if(index!=0){
                            this.address[0].select=false
                            this.address[index].select=true
                            this.$router.push('/isOrder')
                            console.log(this.address[index].select)
                        }
                       
                    }
                     
                 
                }
        }
    }
</script>

<style lang="scss" scoped>
    .wrapper{
        min-height:100vh;
        background-color:#f1f1ee;
        width:100vw;
    }
    .top{
        display:flex;
        justify-content:space-between;
        padding: 3vw;
        background:white;
        margin-bottom: 3vw;
        .title{
            font-size: 5.5vw;
            font-weight: 350;
        }
        img{
            width: 6vw;
            height: 7vw;
            margin-top: 1vw;
        }
        .add{
            font-size: 4vw;
            margin-top: 1.5vw;
        }
    }
    p{
        font-size: 4.5vw;
        margin-top: 1.5vw;
        margin-left: 3vw;
    }
    .card{
        display:flex;
        width: 94vw;
        border-radius: 3vw;
        background-color: white;
        margin: 0 auto;
        margin-bottom:3vw;
        .wrap{
            display:flex;
            flex-direction:column;
            width: 82vw;
        }
        .info{
            display:flex;
            margin-top:3vw;
            .name{
                margin-left: 5vw;
                color: #cdcdcd;
                margin-top: 3vw;
            }
            .phone{
                color: #cdcdcd;
                margin-left: 20vw;
                margin-top: 3vw;
            }
        }
        .info2{
            display: flex;
            margin: 3vw 5vw 5vw 5vw;
            span{
                margin-right:2vw;
            }
            
        }
        img{
            width:8vw;
            height:8vw;
            margin-top: 12vw;
        }
    }
</style>